<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>评分组件 - 函数式定义</title>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    //函数式定义组件 - 评分组件
    //props:传入的参数组成的对象
    function Rating(props) {
      //--处理count
      let count = props.count;
      count = count ? count : 5;
      let star = '';
      for (let i = 0; i < count; i++) {
        star = star + '❤';
      }

      //--处理color
      let styleObj = { color: "black" };
      if (props.color) {
        styleObj = { color: props.color };
      }
      return <div style={styleObj}>{star}</div>
    }
    //1.创建组件
    let child =
      <div className="box">
        <Rating></Rating>
        <Rating color="red"></Rating>
        <Rating count="10"></Rating>
        <Rating color="blue" count="3"></Rating>
      </div>
    //2.找到父元素
    let parent = ReactDOM.createRoot(app);
    //3.挂载子组件到父组件
    parent.render(child);
  </script>
</body>

</html>